<template>
  <div class="header bgColor">
    <div class="tab wrap clearfloat">
      <div class="tab-item floatLeft" width="179px">
        <router-link to="/discoverMusic" class="floatLeft">
          <img src="src/components/header/log.jpg" alt="" width="179px">
        </router-link>
      </div>
      <ul class="tab-item clearfloat floatLeft nav">
        <router-link to="/discoverMusic" tag="li" class="floatLeft" @click.native="changeNav($event,'discoverMusic')"
                     ref="discover">
          <a href="">发现音乐</a>
        </router-link>
        <router-link to="/myMusic" tag="li" class="floatLeft" @click.native="changeNav($event,'myMusic')">
          <a href="">我的音乐</a>
        </router-link>
        <router-link to="/friend" tag="li" class="floatLeft" @click.native="changeNav($event,'friend')">
          <a href="">朋友</a>
        </router-link>
        <router-link to="/mall" tag="li" class="floatLeft" @click.native="changeNav($event,'mall')">
          <a href="">商城</a>
        </router-link>
        <router-link to="/musician" tag="li" class="floatLeft" @click.native="changeNav($event,'musician')">
          <a href="">音乐人</a>
        </router-link>
        <router-link to="/download" tag="li" class="floatLeft" @click.native="changeNav($event,'download')">
          <a href="">下载客户端</a>
        </router-link>
      </ul>
      <div class="search floatLeft">
        <span class="icon-search searchIcon"></span><input type="text" placeholder="音乐/电台/用户">
      </div>
      <div class="topHeader floatLeft" @mouseleave="personalCenterShow=false" @mouseenter="personalCenterShow=true">
        <div class="avatar" v-show="isLogin">
          <img :src="avatar" alt=""
               width="30px" height="30px">
          <span class="triangle"></span>
        </div>
        <div class="login" v-show="!isLogin">
          <span style="color:#787878;cursor:pointer" @click="login(isOnLogin)">登录</span>
          <span class="triangle"></span>
        </div>
        <div class="personalCenter" v-show="personalCenterShow">
          <span class="topTriangle"></span>
          <ul v-show="isLogin">
            <router-link tag="li" to="home">
              <a href="" target="_blank">我的主页</a>
            </router-link>
            <router-link tag="li" to="info">
              <a href="" target="_blank">我的消息</a>
            </router-link>
            <router-link tag="li" to="grade">
              <a href="" target="_blank">我的等级</a>
            </router-link>
            <router-link tag="li" to="member">
              <a href="" target="_blank">会员中心</a>
            </router-link>
            <router-link tag="li" to="set">
              <a href="" target="_blank">个人设置</a>
            </router-link>
            <router-link tag="li" to="quit">
              <a href="" target="_blank">退出</a>
            </router-link>
          </ul>
          <ul v-show="!isLogin">
            <li @click="login(isPhoneLogin)">
              <a href="javascript:void(0)">手机号登录</a>
            </li>
            <li  @click="login()">
              <a href="javascript:void(0)">微信登录</a>
            </li>
            <li  @click="login()">
              <a href="javascript:void(0)">qq登录</a>
            </li>
            <li  @click="login()">
              <a href="javascript:void(0)">微博登录</a>
            </li>
            <li  @click="login(isEmailLogin)">
              <a href="javascript:void(0)">网易邮箱账号登录</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <subnav ref="subnav"></subnav>
    <loginModal ref="loginModal"></loginModal>
  </div>
</template>

<script type="text/ecmascript-6">
  import subnav from '../subnav/subnav.vue'
  import loginModal from '../loginModal/loginModal.vue'
  export default{
    data() {
      return {
        personalCenterShow: false,
        els: [],
        isLogin: false,
        isOnLogin: 0,
        isPhoneLogin: 1,
        isEmailLogin: 2,
        avatar: ''
      }
    },
    methods: {
      changeNav (event, currentMenu) {
        this.$refs.subnav.clickNav(event, currentMenu)
      },
      login(type) {
        this.$refs.loginModal.confirmLogin()
        this.$refs.loginModal.loginType(type)
      }
    },
    components: {
      subnav,
      loginModal
    }
  }
</script>

<style>
  .header .nav li {
    height: 70px;
  }

  .nav li a {
    display: block;
    line-height: 70px;
    padding: 0 19px;
  }

  .nav li.active a {
    color: #fff;
    background: #000;
  }

  .nav li a:hover, .personalCenter a:hover {
    background: #000;
  }

  .header .search {
    position: relative;
    line-height: 70px;
  }

  .header .search input {
    height: 32px;
    border-radius: 30px;
    border: 0;
    padding-left: 30px;
  }

  .search .searchIcon {
    position: absolute;
    top: 29px;
    left: 8px;
    width: 24px;
    height: 24px;
  }

  .topHeader {
    margin-left: 20px;
  }

  .avatar {
    height: 30px;
    padding-top: 30px;
    line-height: 30px;
  }
  .login{
    padding-top: 30px;
  }
  .avatar img {
    border-radius: 30px;
  }

  .triangle {
    display: inline-block;
    width: 15px;
    height: 10px;
    background: url('../../../resource/topbar.png') no-repeat -225px -60px;
  }

  .topTriangle {
    width: 0;
    height: 0;
    border-bottom: 10px solid #2b2b2b;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    top: -10px
  }

  .personalCenter {
    width: 180px;
    position: absolute;
    z-index: 100;
    margin-left: -80px;
    text-align: center;
    background: #2b2b2b;
    margin-top: 10px;
  }

  .personalCenter a {
    border-bottom: 1px solid #000;
    padding: 10px 0;
    display: inline-block;
    width: 100%;
    font-size: 15px;
  }
</style>
